<template>
  <div class="nearby">
    <h3 class="nearby_title">附近店铺</h3>
    <router-link  v-for="item in nearByList " :key="item._id" :to="`/shop/${item._id}`">
      <ShopInfo :item="item" :hideBorder="false"/>
    </router-link>
  </div>
</template>
<script>
import { ref } from 'vue'
import { get } from '@/utils/request'
import ShopInfo from '@/components/ShopInfo'

/* 封装请求数据接口 */
const useNearByListEffect = () => {
  const nearByList = ref([])
  const getNearByList = async () => {
    const result = await get('/api/shop/hot-list')
    if (result?.code === 2000 && result?.data?.length) {
      nearByList.value = result.data
    }
  }
  return {
    nearByList,
    getNearByList
  }
}

export default {
  name: 'NearBy',
  components: {
    ShopInfo
  },
  setup () {
    const { nearByList, getNearByList } = useNearByListEffect()
    getNearByList()
    return { nearByList }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';

.nearby {
  &_title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }

  a {
    text-decoration: none;
  }
}
</style>
